const Core = require("../../utils/core.js");

Component({
  /**
 * 组件的属性列表
 */
  properties: {
    title: { type: String, value: '标题' },
    height: { type: String, value: 'auto' },
    disabledColor: { type: String, value: '#BEBEBE' },
    selectedColor: { type: String, value: '#ab1f24' },
    /**
     * 弹出框组件相关
     */
    /** 显示还是隐藏弹出框, 默认显示 */
    showed: {
      type: Boolean,  // 使用方式1：{{true}}
      value: false,
      optionalTypes: [String] // 使用方式2：'true'
    },
    /** 是否为模态框, 默认为是 */
    modaled: { type: Boolean, value: true },
    /** 是否点击遮罩自动关闭（前提：开启遮罩）, 默认为是 */
    autoHided: {
      type: Boolean,
      value: true,
      optionalTypes: [String]
    },
    /** 复位 */
    reset: {
      type: Boolean,  // 使用方式1：{{true}}
      value: false,
      optionalTypes: [String] // 使用方式2：'true'
    },
    /**
     * 联动相关
     */
    cascadeShowed: {
      type: Boolean,  // 使用方式1：{{true}}
      value: true,
      optionalTypes: [String] // 使用方式2：'true'
    },
    // 联动Tab标题默认显示
    cascadeTab: {
      type: Array,  // 使用方式1：{{['tab1', 'tab2', 'tab3']}}
      value: [],
      optionalTypes: [String] // 使用方式2：'tab1, tab2, tab3'
    },
    /**
     * 搜索相关
     */
    searchShowed: {
      type: Boolean,  // 使用方式1：{{true}}
      value: true,
      optionalTypes: [String] // 使用方式2：'true'
    },
    searchPlaceholder: {
      type: String,
      value: "请输入搜索内容"
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    showFlag: false, // 参见 showed
    /**
     * 三级联动相关 c_ 表示 cascade_
     * 
     * c_level1_content, c_level2_content, c_level3_content 数据格式：
        [
          {id: 1, name: "aaa", _disabled: true }
          {id: 2, name: "bbb", _disabled: false },
          {id: 3, name: "ccc" }
        ]
     */
    c_showedFlag: true, // 参见 cascadeShowed
    c_level1_content: [],
    c_level2_content: [],
    c_level3_content: [],

    c_level1_title: 'tab1', // 参见 cascadeTab
    c_level2_title: 'tab2', // 参见 cascadeTab
    c_level3_title: 'tab3',  // 参见 cascadeTab

    c_level1_selected: null,
    c_level2_selected: null,
    c_level3_selected: null,

    c_selectTab: 1,
    /**
     * 搜索相关 s_ 表示 search_
     * 
     * s_content 数据格式：
        [
          {level1: {id: 1, name: "aaa1"}, level2: {id: 1, name: "bbb1"}, level3: {id: 1, name: "ccc1"}}
          {level1: {id: 2, name: "aaa2"}, level2: {id: 2, name: "bbb2"}, level3: {id: 2, name: "ccc2"}}
        ]
     */
    s_showFlag: true, // 参见 searchShowed
    s_content: [],
    s_value: null,
  },
  /**
   * 监听属性
   */
  observers: {
    'showed, cascadeShowed, searchShowed': function (v, w, z) {
      const _this = this;
      // showed
      if (Core.Type.IsString(v)) {
        _this.setData({ showFlag: v.toBool() })
      } else {
        _this.setData({ showFlag: v })
      }
      // cascadeShowed
      if (Core.Type.IsString(w)) {
        _this.setData({ c_showedFlag: w.toBool() })
      } else {
        _this.setData({ c_showedFlag: w })
      }
      // searchShowed
      if (Core.Type.IsString(z)) {
        _this.setData({ s_showFlag: z.toBool() })
      } else {
        _this.setData({ s_showFlag: z })
      }
      // 初始显示level1
      if (_this.data.showFlag && _this.data.c_showedFlag && _this.data.c_level1_content.length <= 0) {
        _this.onShowlevel1();
      }
    },
    'reset': function (v){
      const _this = this;
      //
      if (Core.Type.IsString(v) ? v.toBool() : v){
        _this.setData({
          c_level1_selected: null,
          c_level2_selected: null,
          c_level3_selected: null,
          c_selectTab: 1,
          cascadeTab: _this.properties.cascadeTab,
          s_content: [],
          s_value: null
        })
      }
    },
    'cascadeTab': function (cascadeTab){
      const _this = this;
      if (Core.Type.IsString(cascadeTab)) {
        const arr = cascadeTab.split(',');
        _this.setData({ 
          cascadeTab: arr,
          c_level1_title: arr[0],
          c_level2_title: arr[1],
          c_level3_title: arr[2]
        })
      } else {
        _this.setData({ 
          c_level1_title: cascadeTab[0],
          c_level2_title: cascadeTab[1],
          c_level3_title: cascadeTab[2] 
        })
      }
    },
    'c_level1_selected, c_level2_selected, c_level3_selected': function (p1, p2, p3) {
      const _this = this;
      const arr = _this.properties.cascadeTab;
      _this.setData({ 
        c_level1_title: p1 ? p1.name : arr[0],
        c_level2_title: p2 ? p2.name : arr[1],
        c_level3_title: p3 ? p3.name : arr[2]
      });
    }
  },
  /**
   * 
   */
  methods: {
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      const _this = this;
    },
    /**
     * 搜索
     */
    onSearch: function (e) {
      const _this = this;
      const search = e.detail.value;
      // 激活事件
      _this.triggerEvent(
        'search',
        {
          search,
          callback: function (data) {
            _this.setData({ s_content: data });
          }
        }
      );
    },
    /**
     * 关闭搜索
     */
    onClearSearch: function (e) {
      this.setData({
        s_content: [],
        s_value: null
      });
    },
    /**
     * 关闭弹出框
     */
    onClose: function () {
      const _this = this;
      _this.setData({ showFlag: false })
      // 激活事件
      _this.triggerEvent(
        'close'
      );
    },
    /**
     * 显示第一级
     */
    onShowlevel1: function () {
      const _this = this;
      // 激活事件
      _this.triggerEvent(
        'showLevel1',
        {
          callback: function(data){
            _this.setData({
              c_level1_content: data,
              c_selectTab: 1,
              c_level2_selected: null,
              c_level3_selected: null
            })
          }
        }
      );
    },
    /**
     * 显示第二级
     */
    onShowlevel2: function (e) {
      const _this = this;
      const level1 = e.currentTarget.dataset.level1;
      const way = e.currentTarget.dataset.way;
      // 激活事件
      _this.triggerEvent(
        'showLevel2',
        {
          level1,
          callback: function (data) {
            _this.setData({
              c_level2_content: data,
              c_selectTab: 2,
              c_level1_selected: level1,
              c_level3_selected: null
            })
            if (way !== "tab") {
              _this.setData({
                c_level2_selected: null
              })
            }
          }
        }
      );
    },
    /**
     * 显示第三级
     */
    onShowlevel3: function (e) {
      const _this = this;
      const level1 = e.currentTarget.dataset.level1;
      const level2 = e.currentTarget.dataset.level2;
      // 激活事件
      _this.triggerEvent(
        'showLevel3',
        {
          level1,
          level2,
          callback: function (data) {
            _this.setData({
              c_level3_content: data,
              c_selectTab: 3,
              c_level3_selected: null,
              c_level2_selected: level2
            })
          }
        }
      );
    },
    /**
     * 选择第三级
     */
    onSelectlevel3: function (e) {
      const _this = this;
      const level1 = e.currentTarget.dataset.level1;
      const level2 = e.currentTarget.dataset.level2;
      const level3 = e.currentTarget.dataset.level3;
      // 激活事件
      _this.triggerEvent(
        'selectLevel3',
        {
          level1,
          level2,
          level3,
          callback: function () {
            _this.setData({
              c_level3_selected: level3,
              showFlag: false
            });
            // 如果通过搜索激活事件，则清空级联数据
            if (e.currentTarget.dataset.way == 'search') {
              _this.setData({
                c_level1_selected: null,
                c_level2_selected: null,
                c_level3_selected: null,
                c_selectTab: 1
              });
            }
          }
        }
      );
    }
  }

})